import {
  defineComponent,
  reactive,
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
} from 'vue';
import { QTr, QTd } from '@teld/q-components/Table';
import TInput from 't/basic/input';
import TInputNumber from 't/basic/inputNumber';
import TDateTime from 't/basic/date-time';
import TSelect from 't/basic/select';
import TDiscount from 't/bussiness/discount';
import TCurrency from 't/bussiness/currency';
import TSelectHelper from 't/bussiness/select-helper';
import TBtnGroup from 't/basic/button-group';
import TCheckbox from 't/basic/checkbox';
import TToggle from 't/basic/toggle';
import { useQuasar } from '@teld/q-components';
import { debounce } from 'lodash';
export default defineComponent({
  name: 'makeTableContent',
  props: {
    tableProps: {
      type: Object,
    },
    parentProps: {
      type: Object,
    },
    columns: {
      type: Array,
    },
  },
  emits: [
    'singleCheck',
    'outBtnClick',
    'upRowByIndex',
    'downRowByIndex',
    'rowChange',
    'rowRef',
    'divRowClick',
    'currentData',
  ],

  setup(props, { attrs, emit, expose, slots }) {
    let $q = useQuasar();
    const parentProps = props.parentProps;
    let hasInit = false;
    const tdEnable = ref(false);
    const hoverTimer = ref(null);
    const leaveTimer = ref(null);
    console.log('TableContent');
    onMounted(() => {
      //组件加载完成
      hasInit = true;
    });
    onBeforeUnmount(() => {
      clearTimeout(hoverTimer.value);
      clearTimeout(leaveTimer.value);
      hoverTimer.value = null;
      leaveTimer.value = null;
    });
    //选中事件
    const singleCheck = data => {
      emit('singleCheck', {
        rowIndex: data.rowIndex,
        state: data.row._selected,
      });
    };
    //操作按钮点击事件
    const btnGroupItemClick = (item, row) => {
      if (item.value === 'up') {
        emit('upRowByIndex', row.rowIndex);
        return;
      }
      if (item.value === 'down') {
        emit('downRowByIndex', row.rowIndex);
        return;
      }
      item.rowData = row.row;
      item.rowIndex = row.rowIndex;
      emit('outBtnClick', item);
    };
    //修改行数据
    const rowChange = (
      data,
      key,
      helperExpression,
      selectHelperData,
      helperColumns,
      valueField,
      displayField,
    ) => {
      console.log(data.rowIndex, key, 'rowChange', selectHelperData);
      // debounce(() => {
      //上下移动以及初始渲染组件时不触发事件
      if (
        (data.row.hasOwnProperty('isChangeing') &&
          data.row.isChangeing === true) ||
        !hasInit ||
        data.row.addEdit
      ) {
        if (data.row.hasOwnProperty('addEdit')) {
          delete data.row.addEdit;
        }

        return;
      }
      // 下拉帮助映射字段 Todo
      if (helperColumns) {
        //映射选中对象里的其他字段
        helperColumns.forEach(element => {
          if (
            element.MappingCode &&
            data.row.hasOwnProperty(element.MappingCode) &&
            selectHelperData &&
            selectHelperData.hasOwnProperty(element.ColCode) &&
            element.MappingCode != valueField &&
            element.MappingCode != displayField
          ) {
            data.row[element.MappingCode] = selectHelperData[element.ColCode];
          } else if (
            !selectHelperData &&
            element.MappingCode != valueField &&
            element.MappingCode != displayField
          ) {
            data.row[element.MappingCode] = null;
          }
        });
      }
      //如果列帮助有脚本，则执行
      try {
        if (helperExpression) {
          new Function('key', 'data', 'selectHelperData', helperExpression)(
            key,
            data,
            selectHelperData,
          );
        }
      } catch (e) {
        console.log(e);
      }

      emit('rowChange', data, key);
      // }, 300);
    };
    const selectDataSource = reactive({});
    const isDropdownOpen = ref(false);
    const selectStaticValue = reactive({});
    let selectLazyLoad = {};
    const rowClick = (data, item) => {
      emit('divRowClick', item?.name, data?.rowIndex, data?.row);
    };
    //渲染可编辑组件
    const makeTableContent = (prop, item) => {
      let expResult = true;
      let componetsRef = null;
      if (prop.row?._$changeset?.ChangeTypeName === 'Delete') {
        return;
      }
      //渲染前先执行可编辑表达式
      if (item.editableExpr) {
        try {
          // if (!item.editableExpr.startsWith('return')) {
          //   let expression = `return ${item.editableExpr}`;
          //   expResult = new Function('rowData', expression)(
          //     prop.row[item.name],
          //   );
          // } else {
          expResult = new Function('rowData', 'columnName', item.editableExpr)(
            prop.row,
            item.name,
          );
          // }
        } catch (e) {
          console.log(e);
        }
      }
      let isHover = true;
      if (parentProps.hoverModel) {
        isHover = tdEnable.value;
      }
      if (
        !parentProps.disable &&
        !parentProps.readonly &&
        expResult &&
        isHover
      ) {
        //保存编辑控件的实例
        componetsRef = ref();
        if (
          item.editorType &&
          item.name != '_selected' &&
          item.name != 'rowNumber' &&
          item.name != '_operation'
        ) {
          emit('rowRef', item.name + '_' + prop.rowIndex, componetsRef);
        }
        switch (item.editorType) {
          case 'checkbox':
            //设置初始值为false
            if (!prop.row.hasOwnProperty(item.name) || !prop.row[item.name])
              prop.row[item.name] = false;
            if (item.name == '_selected') {
              return (
                <TCheckbox
                  ref={componetsRef}
                  id={item.name + '_' + prop.rowIndex}
                  v-model={prop.row[item.name]}
                  onUpdate:modelValue={() => singleCheck(prop)}
                  tabIndex='1'
                />
              );
            } else {
              return (
                <TCheckbox
                  ref={componetsRef}
                  id={item.name + '_' + prop.rowIndex}
                  v-model={prop.row[item.name]}
                  onUpdate:modelValue={() => rowChange(prop, item.name)}
                  tabIndex='1'
                />
              );
            }

          case 'toggle':
            if (!prop.row.hasOwnProperty(item.name) || !prop.row[item.name])
              prop.row[item.name] = false;
            return (
              <TToggle
                style='background:unset;padding-left:8px;'
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                v-model={prop.row[item.name]}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                // v-model='selection'
                // val='blue'
                tabIndex='1'
              />
            );
          case 'input':
            return (
              <TInput
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                debounce={300}
                v-model={prop.row[item.name]}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                class='tr-input-form'
                hideLabel={true}
                disable={parentProps.disable}
                readonly={parentProps.readonly}
                tabIndex='1'
                placeholder={item.placeholder}
                onFocus={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = true;
                }}
                onBlur={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = false;
                  tdEnable.value = false; // 关闭时手动更新状态
                }}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              />
            );
          case 'inputNumber':
            let max = 9999;
            let min = 0;
            let accuracy = 0;
            let step = 1;
            let suffix = '';
            if (item.editorConf?.editorID) {
              let helperSetting = parentProps.columnHelpSettings.find(
                i => i.ID === item.editorConf.editorID,
              );
              if (helperSetting) {
                max =
                  typeof helperSetting.Max === Number
                    ? helperSetting.Max
                    : Number(helperSetting.Max);
                min =
                  typeof helperSetting.Min === Number
                    ? helperSetting.Min
                    : Number(helperSetting.Min);
                accuracy =
                  typeof helperSetting.Accuracy === Number
                    ? helperSetting.Accuracy
                    : Number(helperSetting.Accuracy);
                step =
                  typeof helperSetting.Step === Number
                    ? helperSetting.Step
                    : Number(helperSetting.Step);
                suffix = helperSetting.suffix;
              }
            }
            return (
              <TInputNumber
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                v-model={prop.row[item.name]}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                class='tr-input-form'
                debounce={300}
                hideLabel={true}
                disable={parentProps.disable}
                readonly={parentProps.readonly}
                tabIndex='1'
                placeholder={item.placeholder}
                max={max != NaN ? max : 9999}
                min={min != NaN ? min : 0}
                accuracy={accuracy != NaN ? accuracy : 0}
                suffix={suffix}
                step={step != NaN ? step : 1}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              />
            );
          case 'date':
          case 'time':
          case 'dateTime':
            let type = item.editorType.toLowerCase();
            return (
              <TDateTime
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                format24h
                with-seconds
                dateType={type}
                hideLabel={true}
                v-model={prop.row[item.name]}
                placeholder={item.placeholder}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                disable={parentProps.disable}
                readonly={parentProps.readonly}
                tabIndex='1'
                onVisibleChange={val => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = val;
                  if (!val) {
                    tdEnable.value = false; // 关闭时手动更新状态
                  }
                }}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              />
            );
          case 'select':
            let dataSource = [];
            let displayField = null;
            let valueField = null;
            let helperExp = null;

            // if (!selectDataSource.hasOwnProperty(item.name)) {
            //   selectDataSource[item.name] = [];
            // }
            //获取下拉数据源
            selectLazyLoad[item.name] = function (flag) {
              if (
                parentProps.columnMethod[item.name] &&
                typeof parentProps.columnMethod[item.name] === 'function'
              ) {
                if (!selectDataSource.hasOwnProperty(item.name)) {
                  parentProps.columnMethod[item.name]().then(data => {
                    if (data) {
                      selectDataSource[item.name] = data.List ?? [];
                    }
                  });
                } else if (flag) {
                  parentProps.columnMethod[item.name]().then(data => {
                    if (data) {
                      selectDataSource[item.name] = data.List ?? [];
                    }
                  });
                }
              }
            };
            selectLazyLoad[item.name]();
            if (item.editorConf?.editorID) {
              let helperSetting = parentProps.columnHelpSettings.find(
                i => i.ID === item.editorConf.editorID,
              );
              if (helperSetting) {
                displayField = helperSetting.DisplayField;
                valueField = helperSetting.ValueField;
                helperExp = helperSetting.JSScript ?? ''; //下拉选择之后要执行的脚本
              }
            }
            return (
              <TSelect
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                v-model={prop.row[item.name]}
                onChange={data => rowChange(prop, item.name, helperExp)}
                onClear={() => rowChange(prop, item.name)}
                onPopupShow={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = true;
                }}
                onPopupHide={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = false;
                  tdEnable.value = false; // 关闭时手动更新状态
                }}
                itemsDataSourceType='dynamic'
                hideLabel={true}
                tabIndex='1'
                emit-value
                map-options
                clearable
                use-input
                placeholder={item.placeholder}
                listDataSource={selectDataSource[item.name]}
                displayDataSource={prop.row[item.name]}
                disable={parentProps.disable}
                readonly={parentProps.readonly}
                displayField={displayField}
                valueField={valueField}
                lazyLoading={true}
                alwaysLoad={true}
                onLazyLoad={() => selectLazyLoad[item.name](true)}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              ></TSelect>
            );
          case 'discount':
            return (
              <TDiscount
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                v-model={prop.row[item.name]}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                hideLabel={true}
                tabIndex='1'
                disable={true}
                placeholder={item.placeholder}
                // disabled={parentProps.disable}
                // readonly={parentProps.readonly}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              ></TDiscount>
            );
          case 'currency':
            let max2 = 9999999999999999;
            let min2 = 0;
            let accuracy2 = 0;
            let step2 = 1;
            let langCurrency = '';

            if (item.editorConf?.editorID) {
              let helperSetting = parentProps.columnHelpSettings.find(
                i => i.ID === item.editorConf.editorID,
              );
              if (helperSetting) {
                max2 =
                  typeof helperSetting.Max === Number
                    ? helperSetting.Max
                    : Number(helperSetting.Max);
                min2 =
                  typeof helperSetting.Min === Number
                    ? helperSetting.Min
                    : Number(helperSetting.Min);
                accuracy2 =
                  typeof helperSetting.Accuracy === Number
                    ? helperSetting.Accuracy
                    : Number(helperSetting.Accuracy);
                step2 =
                  typeof helperSetting.Step === Number
                    ? helperSetting.Step
                    : Number(helperSetting.Step);
                langCurrency = helperSetting.langCurrency;
              }
            }
            return (
              <TCurrency
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                v-model={prop.row[item.name]}
                onUpdate:modelValue={() => rowChange(prop, item.name)}
                hideLabel={true}
                max={max2 != NaN ? max2 : 9999999999999999}
                min={min2 != NaN ? min2 : 0}
                precision={accuracy2 != NaN ? accuracy2 : 0}
                step={step2 != NaN ? step2 : 1}
                langCurrency={langCurrency}
                fixedRule='1'
                tabIndex='1'
                placeholder={item.placeholder}
                // disabled={parentProps.disable}
                // readonly={parentProps.readonly}
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              ></TCurrency>
            );
          case 'selectHelper':
            let dataSource2 = null;
            let displayField2 = null;
            let valueField2 = null;
            let helperColumns = [];
            let displayFieldMappingCode = null;
            let valueFieldMappingCode = null;
            let helperExp2 = null;
            let simpleModel = true;
            let columns = [];
            //获取下拉帮助数据源
            if (
              parentProps.columnMethod[item.name] &&
              typeof parentProps.columnMethod[item.name] === 'function'
            ) {
              dataSource2 = parentProps.columnMethod[item.name];
            }
            if (item.editorConf?.editorID) {
              let helperSetting2 = parentProps.columnHelpSettings.find(
                i => i.ID === item.editorConf.editorID,
              );
              if (helperSetting2) {
                displayField2 = helperSetting2.DisplayField;
                valueField2 = helperSetting2.ValueField;
                helperColumns = helperSetting2.ColumnsMapping;
                //获取映射字段
                displayFieldMappingCode = helperColumns.find(
                  i => i.ColCode === displayField2,
                )?.MappingCode;
                valueFieldMappingCode = helperColumns.find(
                  i => i.ColCode === valueField2,
                )?.MappingCode;
                helperExp2 = helperSetting2.JSScript ?? ''; //下拉帮助选择之后要执行的脚本
                helperColumns.forEach(element => {
                  if (element.IsShow) {
                    simpleModel = false;
                  }
                  columns.push({
                    ID: element.ID,
                    dataField: element.ColCode,
                    caption: element.ColName,
                    isShow: element.IsShow,
                    width: element.ColWidth,
                    ValueInfo_caption: {
                      ShowValue: element.ColName,
                      ReferenceExpr: element.ColNameRefSchemaExpr,
                      Type: 0,
                    },
                  });
                });
              }
            }
            return (
              <TSelectHelper
                ref={componetsRef}
                id={item.name + '_' + prop.rowIndex}
                hideLabel={true}
                searchEnable={true}
                searchPosition='top'
                simple={simpleModel}
                dropDownWidthStatic='100%'
                historyEnable={false}
                historySaveCount={3}
                helperCode=''
                pagination={true}
                countPerPage={10}
                multiple={false}
                showChecked={true}
                maxCheckedLength={10}
                isSingle={true}
                openType='right'
                height='80%'
                columns={columns}
                labelField={displayField2}
                valueField={valueField2}
                iconEnable={false}
                helpPlacement='bottom'
                tabIndex='1'
                placeholder={item.placeholder}
                disable={parentProps.disable}
                readonly={parentProps.readonly}
                search={dataSource2}
                v-model:value={prop.row[valueFieldMappingCode ?? item.name]}
                v-model:text={prop.row[displayFieldMappingCode ?? item.name]}
                opening={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = true;
                }}
                onDropHide={() => {
                  if (!parentProps.hoverModel) {
                    return;
                  }
                  isDropdownOpen.value = false;
                  tdEnable.value = false; // 关闭时手动更新状态
                }}
                onConfirm={data =>
                  rowChange(
                    prop,
                    item.name,
                    helperExp2,
                    data,
                    helperColumns,
                    valueFieldMappingCode ?? item.name,
                    displayFieldMappingCode ?? item.name,
                  )
                }
                required={
                  item.isRequired == true || item.isRequired == 'true'
                    ? true
                    : false
                }
                rules={
                  item.isRequired == true || item.isRequired == 'true'
                    ? [
                        val =>
                          !!val || val === 0 || $q.lang.editTable?.requiredMsg,
                      ]
                    : undefined
                }
              ></TSelectHelper>
            );
          case 'btnGroup':
            return (
              <TBtnGroup
                class='tr-button-group-item-text'
                style='width:max-content;'
                ref='btngroup'
                staticItems={item.dataSource}
                btnSpace='8px'
                moreConf={item.btnGroupOptions?.moreConf}
                autoModel={item.btnGroupOptions?.autoModel}
                moreMaxCount={item.btnGroupOptions?.moreMaxCount}
                btnDropPop={item.btnGroupOptions?.btnDropPop}
                moreBtnIcon={item.btnGroupOptions?.moreBtnIcon}
                tabIndex='1'
                onBtnGroupItemClick={data => btnGroupItemClick(data, prop)}
              />
            );
          case 'rowNumber':
            return <span class='rowNumber'>{prop.rowIndex + 1}</span>;
        }
      } else {
        //序号 选中 操作列不受readonly影响
        if (item.name == 'rowNumber') {
          return <span class='rowNumber'>{prop.rowIndex + 1}</span>;
        }
        if (item.name == '_selected') {
          if (!prop.row.hasOwnProperty(item.name)) prop.row[item.name] = false;
          return (
            <TCheckbox
              v-model={prop.row[item.name]}
              onUpdate:modelValue={() => singleCheck(prop)}
              tabIndex='1'
            />
          );
        }
        if (item.name == '_operation') {
          return (
            <TBtnGroup
              style='width:max-content;'
              class='tr-button-group-item-text'
              ref='btngroup'
              staticItems={item.dataSource}
              btnSpace='8px'
              moreConf={item.btnGroupOptions?.moreConf}
              autoModel={item.btnGroupOptions?.autoModel}
              moreMaxCount={item.btnGroupOptions?.moreMaxCount}
              btnDropPop={item.btnGroupOptions?.btnDropPop}
              moreBtnIcon={item.btnGroupOptions?.moreBtnIcon}
              tabIndex='1'
              onBtnGroupItemClick={data => btnGroupItemClick(data, prop)}
            />
          );
        }
        if (item.editorType == 'select') {
          let dataSource = [];
          let displayField = null;
          let valueField = null;
          let helperExp = null;
          //获取下拉数据源
          selectLazyLoad[item.name] = function () {
            if (
              parentProps.columnMethod[item.name] &&
              typeof parentProps.columnMethod[item.name] === 'function'
            ) {
              if (!selectDataSource.hasOwnProperty(item.name)) {
                parentProps.columnMethod[item.name]().then(data => {
                  if (data) {
                    selectDataSource[item.name] = data.List ?? [];
                    // 字段映射
                    if (data.List) {
                      let obj = data.List.find(i => {
                        return i[valueField] == prop.row[item.name];
                      });
                      if (obj) {
                        selectStaticValue[item.name] = obj[displayField];
                      } else {
                        selectStaticValue[item.name] = prop.row[item.name];
                      }
                    }
                  }
                });
              }
            }
          };
          if (item.editorConf?.editorID) {
            let helperSetting = parentProps.columnHelpSettings.find(
              i => i.ID === item.editorConf.editorID,
            );
            if (helperSetting) {
              displayField = helperSetting.DisplayField;
              valueField = helperSetting.ValueField;
              helperExp = helperSetting.JSScript ?? ''; //下拉选择之后要执行的脚本
            }
          }
          if (selectDataSource.hasOwnProperty(item.name)) {
            let data = selectDataSource[item.name];
            let obj = data.find(i => {
              return i[valueField] == prop.row[item.name];
            });
            if (
              obj &&
              (!selectStaticValue.hasOwnProperty(item.name) ||
                selectStaticValue[item.name] != obj[displayField])
            ) {
              selectStaticValue[item.name] = obj[displayField];
            }
          } else {
            selectLazyLoad[item.name]();
          }
          return (
            <TInput
              id={item.name + '_' + prop.rowIndex}
              v-model={selectStaticValue[item.name]}
              class='tr-input-default tr-input-noborder'
              hideLabel={true}
              readonly={true}
              tabIndex='1'
            />
          );
        }
        if (item.editorType == 'selectHelper') {
          let dataSource2 = null;
          let displayField2 = null;
          let valueField2 = null;
          let helperColumns = [];
          let displayFieldMappingCode = null;
          let valueFieldMappingCode = null;
          let helperExp2 = null;
          //获取下拉帮助数据源
          if (
            parentProps.columnMethod[item.name] &&
            typeof parentProps.columnMethod[item.name] === 'function'
          ) {
            dataSource2 = parentProps.columnMethod[item.name];
          }
          if (item.editorConf?.editorID) {
            let helperSetting2 = parentProps.columnHelpSettings.find(
              i => i.ID === item.editorConf.editorID,
            );
            if (helperSetting2) {
              displayField2 = helperSetting2.DisplayField;
              valueField2 = helperSetting2.ValueField;
              helperColumns = helperSetting2.ColumnsMapping;
              //获取映射字段
              displayFieldMappingCode = helperColumns.find(
                i => i.ColCode === displayField2,
              )?.MappingCode;
              valueFieldMappingCode = helperColumns.find(
                i => i.ColCode === valueField2,
              )?.MappingCode;
              helperExp2 = helperSetting2.JSScript ?? ''; //下拉帮助选择之后要执行的脚本
            }
          }
          return (
            <span title={prop.row[displayFieldMappingCode ?? item.name]}>
              {prop.row[displayFieldMappingCode ?? item.name]}
            </span>
          );
        }
        if (item.editorType == 'checkbox' && item.name != '_selected') {
          //设置初始值为false
          if (!prop.row.hasOwnProperty(item.name) || !prop.row[item.name])
            prop.row[item.name] = false;
          return (
            <TCheckbox
              ref={componetsRef}
              id={item.name + '_' + prop.rowIndex}
              v-model={prop.row[item.name]}
              onUpdate:modelValue={() => rowChange(prop, item.name)}
              tabIndex='1'
              disable={true}
            />
          );
        }
        if (item.editorType == 'toggle') {
          if (!prop.row.hasOwnProperty(item.name) || !prop.row[item.name])
            prop.row[item.name] = false;
          return (
            <TToggle
              style='background:unset;padding-left:8px;'
              ref={componetsRef}
              id={item.name + '_' + prop.rowIndex}
              v-model={prop.row[item.name]}
              onUpdate:modelValue={() => rowChange(prop, item.name)}
              // v-model='selection'
              // val='blue'
              tabIndex='1'
              disable={true}
            />
          );
        }
      }
      return <span title={prop.row[item.name]}>{prop.row[item.name]}</span>;
    };

    return () => {
      emit('currentData', props.tableProps.row); // 触发当前行数据
      return (
        <QTr
          props={props.tableProps}
          class='divTr'
          onMouseenter={() => {
            if (!parentProps.hoverModel) return;
            clearTimeout(hoverTimer.value); // 清除之前的延迟操作
            clearTimeout(leaveTimer.value); // 清除离开的未执行操作

            hoverTimer.value = setTimeout(() => {
              tdEnable.value = true;
              hasInit = false;
              const timeout = setTimeout(() => {
                hasInit = true;
                clearTimeout(timeout);
              }, 200);
            }, 200); // 添加防抖阈值
          }}
          onMouseleave={() => {
            if (!parentProps.hoverModel) return;
            clearTimeout(hoverTimer.value); // 清除未执行的进入操作

            // const timer = setTimeout(() => {
              if (!isDropdownOpen.value) {
                tdEnable.value = false;
              }
            //   clearTimeout(timer);
            // }, 200);
          }}
        >
          {props.columns.map((item, columnIndex) => {
            return (
              <QTd
                key={item.name}
                props={props.tableProps}
                onClickCapture={event => {
                  rowClick(props.tableProps, item);
                }}
              >
                <div
                  style={{
                    'width':
                      item.name !== '_selected' && item.width
                        ? parseFloat(item.width) - 16 + 'px'
                        : '100%',
                    'min-width':
                      item.editorType == 'date' ||
                      item.editorType == 'time' ||
                      item.editorType == 'dateTime'
                        ? '230px'
                        : '100%',
                    'text-align': item.align ? item.align : 'left',
                    'overflow': 'hidden',
                    'text-overflow': 'ellipsis',
                  }}
                >
                  {makeTableContent(props.tableProps, item)}
                </div>
              </QTd>
            );
          })}
        </QTr>
      );
    };
  },
});
